import { useState } from 'react';
import BoxItem from '@/components/BoxItem';
import { Button, Select, DatePicker, Flex, Tag, Space, Form, Row, Col } from 'antd';
import dayjs from 'dayjs';
import CustomTable from '../components/CustomTable';

const statusOptions = [
	'全部',
	'编辑中',
	'待审核',
	'审核驳回',
	'待出库',
	'部分出库',
	'已完成',
	'已关闭'
];

const dateRanges = [
	{ label: '今天', value: 'today' },
	{ label: '昨天', value: 'yesterday' },
	{ label: '近七天', value: 'last7days' }
];

const columns = [
	{
		title: '单据编码',
		dataIndex: 'documentCode',
		key: 'documentCode'
	},
	{
		title: '客户名称',
		dataIndex: 'customerName',
		key: 'customerName'
	},
	{
		title: '实收金额',
		dataIndex: 'amountReceived',
		key: 'amountReceived',
		render: (amount: number) => `${amount.toFixed(2)}` // 格式化金额
	},
	{
		title: '仓库',
		dataIndex: 'warehouse',
		key: 'warehouse'
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		render: (status: string) => {
			let color = 'green'; // 默认颜色
			switch (status) {
				case '编辑中':
					color = 'blue';
					break;
				case '待审核':
					color = 'orange';
					break;
				case '审核驳回':
					color = 'red';
					break;
				case '待出库':
					color = 'cyan';
					break;
				case '部分出库':
					color = 'geekblue';
					break;
				case '已完成':
					color = 'green';
					break;
				case '已关闭':
					color = 'gray';
					break;
				default:
					color = 'green';
			}
			return <Tag color={color}>{status}</Tag>;
		}
	},
	{
		title: '提交时间',
		dataIndex: 'submitTime',
		key: 'submitTime',
		render: (time: number) => (time ? new Date(time).toLocaleString() : '-') // 格式化提交时间
	},
	{
		title: '备注',
		dataIndex: 'remark',
		key: 'remark',
		render: (remark: string) => remark || '-' // 如果备注为空，显示'-'
	},
	{
		title: '操作',
		key: 'action',
		render: (record: any) => (
			<Space size="middle">
				<Button onClick={() => console.log(`Edit ${record.documentCode}`)}>编辑</Button>
				<Button danger onClick={() => console.log(`Delete ${record.documentCode}`)}>
					删除
				</Button>
			</Space>
		)
	}
];

const data = [
	{
		key: '1',
		documentCode: 'DOC001',
		customerName: '张三',
		amountReceived: 5000.5,
		warehouse: '仓库A',
		status: '待审核',
		submitTime: '2024-10-01T10:00:00Z',
		remark: '急需出货'
	},
	{
		key: '2',
		documentCode: 'DOC002',
		customerName: '李四',
		amountReceived: 3200,
		warehouse: '仓库B',
		status: '审核驳回',
		submitTime: '2024-10-05T11:30:00Z',
		remark: '订单问题'
	},
	{
		key: '3',
		documentCode: 'DOC003',
		customerName: '王五',
		amountReceived: 7800,
		warehouse: '仓库C',
		status: '已完成',
		submitTime: '2024-10-10T14:00:00Z',
		remark: ''
	},
	{
		key: '4',
		documentCode: 'DOC004',
		customerName: '赵六',
		amountReceived: 4500,
		warehouse: '仓库D',
		status: '待出库',
		submitTime: '2024-10-15T09:00:00Z',
		remark: '客户要求加急'
	},
	{
		key: '5',
		documentCode: 'DOC005',
		customerName: '钱七',
		amountReceived: 6700,
		warehouse: '仓库E',
		status: '部分出库',
		submitTime: '2024-10-20T12:00:00Z'
	},
	{
		key: '6',
		documentCode: 'DOC006',
		customerName: '孙八',
		amountReceived: 5100,
		warehouse: '仓库F',
		status: '已关闭',
		submitTime: '2024-10-25T15:00:00Z',
		remark: '客户取消订单'
	},
	{
		key: '7',
		documentCode: 'DOC007',
		customerName: '周九',
		amountReceived: 8900,
		warehouse: '仓库G',
		status: '编辑中',
		submitTime: '2024-10-30T08:00:00Z',
		remark: '客户要求修改'
	}
];

const SalesOrder = () => {
	const [form] = Form.useForm();
	const [status, setStatus] = useState<string>('');

	const handleDateChange = (range: string) => {
		const now = dayjs();
		let startDate = null;
		let endDate = null;

		switch (range) {
			case 'today':
				startDate = now.startOf('day');
				endDate = now.endOf('day');
				break;
			case 'yesterday':
				startDate = now.subtract(1, 'day').startOf('day');
				endDate = now.subtract(1, 'day').endOf('day');
				break;
			case 'last7days':
				startDate = now.subtract(7, 'days');
				endDate = now;
				break;
			default:
				break;
		}
		form.setFieldsValue({
			startDate,
			endDate
		});
	};

	const resetFilters = () => {
		form.resetFields();
	};

	return (
		<div>
			<BoxItem>
				<Flex gap="small" wrap>
					<Button type="primary">新建</Button>
					<Button>导入</Button>
					<Button>导出</Button>
				</Flex>
			</BoxItem>
			<BoxItem>
				<Form form={form} layout="inline" onFinish={() => console.log('搜索')}>
					<Row gutter={16} justify="start">
						{/* 状态选择 */}
						<Col>
							<Form.Item label="状态" name="status">
								<Select
									value={status}
									onChange={setStatus}
									placeholder="选择状态"
									style={{ width: 160, marginBottom: '20px' }}
								>
									{statusOptions.map(statusOption => (
										<Select.Option key={statusOption} value={statusOption}>
											{statusOption}
										</Select.Option>
									))}
								</Select>
							</Form.Item>
						</Col>

						{/* 起止时间 */}
						<Col>
							<Form.Item label="创建时间" name="startDate">
								<DatePicker style={{ width: 180 }} placeholder="起始时间" allowClear />
							</Form.Item>
						</Col>
						<Col>
							<Form.Item label="至" name="endDate">
								<DatePicker style={{ width: 180 }} placeholder="结束时间" allowClear />
							</Form.Item>
						</Col>

						{/* 快捷时间选择 */}
						<Col>
							<Space>
								{dateRanges.map(({ label, value }) => (
									<Button key={value} onClick={() => handleDateChange(value)}>
										{label}
									</Button>
								))}
							</Space>
						</Col>

						<Col>
							<Button type="primary">搜索</Button>
							<Button type="default" onClick={resetFilters}>
								重置
							</Button>
						</Col>
					</Row>
				</Form>
			</BoxItem>
			<BoxItem>
				<CustomTable dataSource={data} columns={columns} rowKey="key" pagination={true} />
			</BoxItem>
		</div>
	);
};

export default SalesOrder;
